import {h, RectNode, RectNodeModel} from "@logicflow/core";
import htm from "htm";

class SquareLakeFieldNameConvert extends RectNode {
    // 从iconfont下载的svg
    getIcon() {

        // const htm = require("htm");
        //htm.bind(h);
        const {properties} = this.props.model;
        let icon = properties.icon;
        if (icon) {
            icon = window.atob(icon);
        } else {
            icon = `<svg t="1670282952903" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2700" width="200" height="200"><path d="M42.073656 647.681604a41.638378 41.638378 0 0 0 41.518036-41.638378V312.047393c0-50.904723 42.360431-87.849758 100.606024-87.849757h710.620299l-70.520491 70.159464a41.277352 41.277352 0 0 0 0 58.726961 42.480773 42.480773 0 0 0 58.726962 0l116.972553-116.130159a76.657939 76.657939 0 0 0 0-109.029973L882.783801 12.034454a41.75872 41.75872 0 0 0-29.483822-12.034213 41.518036 41.518036 0 0 0-29.002455 71.001859l70.520491 70.159463h-710.018589a192.547414 192.547414 0 0 0-127.923688 45.730011A164.026328 164.026328 0 0 0 0.314935 312.047393v293.995833a41.518036 41.518036 0 0 0 41.758721 41.638378zM982.186404 376.310093a41.638378 41.638378 0 0 0-41.638379 41.638378v270.529116c0 59.20833-47.053774 111.316474-100.606023 111.316474H127.997939l70.520491-70.159464a41.518036 41.518036 0 0 0-28.882113-71.001859 40.675641 40.675641 0 0 0-29.604164 12.034213l-116.972554 116.130159a76.657939 76.657939 0 0 0 0 109.029973l116.972554 116.130159a41.518036 41.518036 0 1 0 58.486277-58.967645l-70.520491-70.159464h711.944063a176.301226 176.301226 0 0 0 131.41361-60.89312A202.295127 202.295127 0 0 0 1023.223071 688.477587V417.948471a41.638378 41.638378 0 0 0-41.036667-41.638378z" fill="#4D4D4D" p-id="2701"></path></svg>`;
        }

        const html = htm.bind(h);
        const vnode = html([icon]);
        const {x, y, width, height} = this.props.model;
        // const style = this.props.model.getNodeStyle();
        vnode.props.x = x - width / 2 + 5;
        vnode.props.y = y - height / 2 + 25;
        vnode.props.width = width / 3;
        vnode.props.height = height / 3;
        return vnode;
    }

    getShape() {
        const {model} = this.props;
        const {x, y, width, height, radius} = model;
        const style = model.getNodeStyle();

        return h("g", {}, [h("rect", {
            ...style, x: x - width / 2, y: y - height / 2, // rx: radius,
            // ry: radius,
            width, height
        }), this.getIcon()]);
    }
}

class SquareLakeFieldNameConvertModel extends RectNodeModel {
    initNodeData(data) {
        if (data.text && typeof data.text === "string") {
            data.text = {
                value: data.text, x: data.x, y: data.y
            };
        }
        // debugger
        // const id = nanoid(5);
        // data.text.value = data.text.value + "" + id;
        // data.id = data.text.value;

        super.initNodeData(data);
        // data.id =
        // this.r = 60;
        this.width = 200;
        this.height = 80;
        this.radius = 50;
    }

    getNodeStyle() {
        const style = super.getNodeStyle();
        // style.stroke = "#1296db";
        // style.strokeWidth = 4;
        return style;
    }
}

export default {
    type: "FieldNameConvert", model: SquareLakeFieldNameConvertModel, view: SquareLakeFieldNameConvert
};
